<template>
  <div>
    <el-dialog
      destroy-on-close
      :title="title"
      :visible.sync="visibles"
      :close-on-click-modal="false"
      width="800px"
      @close="onClose"
      @open="onopen"
    >
      <h3>菜单类</h3>
      <el-checkbox-group v-model="checkListCD">
        <el-checkbox v-for="item in check1" :key="item.id" :label="item.id" style="width: 200px">{{
          item.rolename
        }}</el-checkbox>
      </el-checkbox-group>
      <h3>数据类</h3>
      <el-checkbox-group v-model="checkListSJ">
        <el-checkbox v-for="item in check2" :key="item.id" :label="item.id" style="width: 200px">{{
          item.rolename
        }}</el-checkbox>
      </el-checkbox-group>
      <h3>功能类</h3>
      <el-checkbox-group v-model="checkListGN">
        <el-checkbox v-for="item in check3" :key="item.id" :label="item.id" style="width: 200px">{{
          item.rolename
        }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer">
        <el-button type="info" @click="onSubmit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { RoleList } from '@/api/settings/juese'
import { UserRoleArr, setUserRoles } from '@/api/settings/denglurenyuan'

export default {
  props: ['visiblejs', 'jsid'],

  data() {
    return {
      queryForm: {},
      visibles: this.visiblejs,
      title: '分配角色',
      id: this.jsid,
      Forms: {},
      checkListCD: [],
      checkListSJ: [],
      checkListGN: [],

      check1: [],
      check2: [],
      check3: []
    }
  },
  // 这里用watch方法来监听父组件传过来的值，来实现实时更新
  watch: {
    visiblejs(val) {
      // message即为父组件的值，val参数为值
      this.visibles = val // 将父组件的值赋给childrenMessage 子组件的值
    },
    jsid(val) {
      // message即为父组件的值，val参数为值
      this.id = val // 将父组件的值赋给childrenMessage 子组件的值
    }
  },

  methods: {
    async onopen() {
      this.loading = true
      this.check1 = []
      this.check2 = []
      this.check3 = []
      this.checkListCD = []
      this.checkListSJ = []
      this.checkListGN = []
      const { content } = await RoleList(this.queryForm)
      // const { content } = await QueryPageList(this.queryForm)
      console.log('content', content)
      const res = await UserRoleArr({ userid: this.id })
      console.log('RES', res.content)
      var arr = []
      if (res.content != null) {
        arr = res.content.roleidarr.split(',')
        console.log(1)
      } else {
        arr = []
        console.log(2)
      }

      content.forEach(item => {
        if (item.roletype == '1') {
          this.check1.push(item)
        }
        if (item.roletype == '2') {
          this.check2.push(item)
        }
        if (item.roletype == '3') {
          this.check3.push(item)
        }
        arr.forEach(items => {
          if (item.id == items) {
            if (item.roletype == '1') {
              this.checkListCD.push(item.id)
            }
            if (item.roletype == '2') {
              this.checkListSJ.push(item.id)
            }
            if (item.roletype == '3') {
              this.checkListGN.push(item.id)
            }
          }
        })
      })

      this.loading = false
    },
    // 点击关闭给父组件传值
    onClose() {
      this.$emit('fatherjs')
    },
    async onSubmit() {
      this.Forms.userid = this.id
      const menuidarr = [...this.checkListGN, ...this.checkListSJ, ...this.checkListCD]
      this.Forms.roleidarr = menuidarr.join(',')
      console.log(this.Forms)
      const res = await setUserRoles(this.Forms)
      console.log(res)
      if (res.success) {
        this.$message({
          type: 'success',
          message: res.message
        })
        this.$emit('fatherjs')
        return
      } else {
        return this.$message.error(res.message)
      }
    }
  }
}
</script>

<style></style>
